<template>
    <div class="box" v-show="previewShow" @click="handleClose">
        <div class="box-list">
            <div class="curriculum">
                <div class="curriculum-main-left">
                    <div class="title">求职意向</div>
                    <div class="flex mainlist-hover">
                        <div class="name">{{ message.intention.post.name }}</div>
                        <div class="flex left-money">
                            <img src="../../assets/home/money.png" alt="">
                            <div>{{ message.intention.salary[0] }}-{{ message.intention.salary[1] }}</div>
                        </div>
                        <div class="flex left-money flex1">
                            <img src="../../assets/home/map.png" alt="">
                            <div v-for="(city, cityindex) in message.intention.city" :key="cityindex" class="city">
                                {{ city }}</div>
                        </div>
                    </div>
                    <div class="title flex mgt">
                        <div class="flex1">工作经历</div>
                    </div>
                    <div class="main-jinglist mainlist-hover" v-for="(item, index) in message.work_experience"
                        :key="index">
                        <div class="flex">
                            <div class="flex1">{{ item.company }}</div>
                            <div class="time">{{ formatDate(item.range[0]) }} - {{ formatDate(item.range[1]) }}</div>
                        </div>
                        <div class="yuan">{{ item.post }}</div>
                        <div class="left-miaoshu">
                            <div>工作描述:</div>
                            <p>{{ item.desc }}</p>
                        </div>
                    </div>
                    <div class="title flex mgt">
                        <div class="flex1 ">项目经历</div>
                    </div>
                    <div class="main-jinglist mainlist-hover" v-for="(item, index) in message.project_experience"
                        :key="index">
                        <div class="flex">
                            <div class="flex1">{{ item.name }}</div>
                            <div class="time">{{ formatDate(item.range[0]) }} - {{ formatDate(item.range[1]) }}</div>
                        </div>
                        <div class="left-miaoshu">
                            <div>项目内容:</div>
                            <p> {{ item.desc }}
                            </p>
                        </div>
                    </div>
                    <div class="title flex mgt">
                        <div class="flex1">教育经历</div>
                    </div>
                    <div class="main-jinglist mainlist-hover" v-for="(item, index) in message.education" :key="index">
                        <div class="flex">
                            <div class="flex1">{{ item.school }}</div>
                            <div class="time">{{ formatDate(item.range[0]) }} - {{ formatDate(item.range[1]) }}</div>
                        </div>
                        <div class="yuan">{{ item.degree }} {{ item.major }}</div>
                        <div class="left-miaoshu">
                            <div>专业描述:</div>
                            <p>{{ item.desc }}</p>
                        </div>
                    </div>
                    <div class="title flex mgt">
                        <div class="flex1">附加信息</div>
                    </div>
                    <div class="main-jinglist mainlist-hover" v-for="(item, index) in message.attach_info" :key="index">
                        <div class="left-miaoshu">
                            <div>主题:</div>
                            <p>{{ item.topic }}</p>
                        </div>
                        <div class="left-miaoshu">
                            <div>主题描述:</div>
                            <p>{{ item.desc }}</p>
                        </div>
                    </div>
                </div>
                <div class="curriculum-main-right">
                    <div>
                        <div class="title">基本信息</div>
                        <div style="font-weight: bold;">{{ userInfo.name }}</div>
                        <div class="flex">
                            <div class="name">{{ userInfo.sex == 1 ? '男' : '女' }}</div>
                            <div class="gun"></div>
                            <div>{{ userInfo.age }}岁</div>
                            <div class="gun"></div>
                            <div>{{ userInfo.mobile }}</div>
                        </div>
                        <div class="flex">
                            <img src="../../assets/home/building.png" alt="" class="building">
                            <div>{{ userInfo.company_name }}</div>
                        </div>
                        <div class="flex">
                            <img src="@/assets/home/home-6l.png" alt="" class="building">
                            <div>{{ areaNames }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="title mgt">教育平台能力值</div>
                        <div class="right-box flex">
                            <div class="flex1">总能力值</div>
                            <div class="num">{{ details.ability }}</div>
                        </div>
                        <div class="flex flex-wrap">
                            <div class="right-zhi" v-for="(item, index) in details.details" :key="item.score">
                                {{ item.name }}：{{ item.score }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="title mgt">能力证书</div>
                        <div class="honor-main flex flex-wrap">
                            <template v-for="(item, index) in certData.items" :key="item.id">
                                <div class="honor-main-list" v-if="item.job">
                                    <div class="honor-main-list-bg"></div>
                                    <div>{{ item.job.name }}</div>
                                </div>
                            </template>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
    message: Object,
    details: Object,
    certData: Object,
    userInfo: Object,
    previewShow: Boolean,
    areaNames: String,
});
// 格式化日期
function formatDate(date) {
    return date ? new Date(date).toLocaleDateString() : '';
}
// 定义emit事件
const emit = defineEmits(['close-preview']);

// 处理点击事件，通知父组件关闭预览
const handleClose = () => {
    emit('close-preview');
};
const backgroundImages = {
    S: new URL('@/assets/home/jin.png', import.meta.url).href,
    A: new URL('@/assets/home/yin.png', import.meta.url).href,
    B: new URL('@/assets/home/tong.png', import.meta.url).href
}
const textColor = {
    S: '#A57C00',
    A: '#87888A',
    B: '#B56706',
}
const getBackgroundImage = (level) => {
    return backgroundImages[level];
};
const getTextColor = (level) => {
    return textColor[level];
};
// console.log(props.value)
</script>
<style lang="scss" scoped>
.box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 999;

    .box-list {
        width: 900px;
        margin: 20px auto 0;
        background-color: #fff;
        height: 96%;
        overflow: auto;
        border-radius: 4px;
    }
}

.curriculum {
    padding: 20px;

    .mgt {
        margin-top: 24px;
    }

    .mainlist-hovers {
        background-color: #FAFAFA;
        cursor: pointer;
        border-radius: 6px 6px 6px 6px;
        padding: 10px 16px;
        margin-top: 20px;

        .yuexins {
            margin-left: 20px !important;
        }

        .yuexin {
            .hang {
                margin: 0 12px;
            }

            :deep(.el-select) {
                width: 123px;
            }
        }
    }

    .mainlist-hover {
        padding: 10px;
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 14px;
        border: 1px solid #eee;

        .bianji {
            color: #33A0FF;
            margin-left: 20px;

            .delnum {
                color: #FC474C;
            }

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-top: 5px;
            }

            .del {
                margin-left: 15px;
                margin-top: 10px;
            }
        }
    }

    display: flex;

    .title {
        font-family: MiSans, MiSans;
        font-weight: bold;
        font-size: 18px;
        color: #33A0FF;
        margin-bottom: 10px;

        .add {
            width: 20px;
            height: 20px;
            cursor: pointer;
            // margin-top: 10px;
        }
    }

    .curriculum-main-right {
        // border-left: 1px solid #eee;
        padding-left: 24px;
        font-size: 13px;
        line-height: 35px;
        width: 300px;

        .honor-main {
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.88);
            line-height: 22px;
            justify-content: space-between;

            .honor-main-list {
                margin-bottom: 16px;
                text-align: center;
                line-height: 38px;
            }

            .honor-main-list-bg {
                width: 112px;
                text-align: left !important;
                height: 84px;
                background-image: url(../../assets/home/jin.png);
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 24px 16px;
                line-height: 30px !important;
                color: #A57C00;
                font-size: 16px;
                font-family: DingTalk JinBuTi, DingTalk JinBuTi;
                font-weight: 400;

                .num {
                    font-weight: bold;
                    font-size: 22px;
                }
            }
        }

        .right-zhi {
            font-family: MiSans, MiSans;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            line-height: 38px;
            margin-right: 15px;
        }

        .right-box {
            height: 44px;
            background: linear-gradient(315deg, #E9F5FF 0%, #F4FAFF 100%);
            border-radius: 6px 6px 6px 6px;
            box-sizing: border-box;
            padding: 0 16px;
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 44px;

            .num {
                font-family: DingTalk JinBuTi, DingTalk JinBuTi;
                font-weight: 400;
                color: #9DD1FF;
                font-size: 20px;
            }
        }

        .building {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            margin-top: 10px;
        }

        .gun {
            margin: 10px 15px 0;
            width: 1px;
            height: 14px;
            background: rgba(0, 0, 0, 0.25);
            border-radius: 0px 0px 0px 0px;
        }
    }

    .curriculum-main-left {
        box-sizing: border-box;
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 16px;
        flex: 1;

        color: rgba(0, 0, 0, 0.88);

        .main-jinglist {
            font-weight: bold;
            line-height: 35px;
            margin-bottom: 10px;

            .left-miaoshu {
                display: flex;
                font-weight: bold;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.88);

                p {
                    flex: 1;
                    font-weight: 400;
                    padding-left: 12px;
                }
            }

            .yuan {
                font-weight: 400;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.65);
            }

            .time {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);
                font-weight: 400;
            }
        }

        .name {
            padding-right: 24px;
            font-size: 14px;
        }

        .left-money {
            padding: 0 24px;
            border-left: 1px solid #BFBFBF;
            font-size: 14px;

            .city {
                margin-right: 5px;
            }

            img {
                width: 16px;
                height: 16px;
                margin-top: 2px;
                margin-right: 8px;
            }
        }
    }
}
</style>